<template>
	<!-- indicator-dots vertical -->
	<view class="flex flex-dir-c">
		<view style="position: absolute;width: 100%;">
			<u-navbar :is-back="false" title="" background="">
				<view class="slot-wrap flex flex-jc-c flex-ai-c">
					<u-icon name="arrow-left" color="#fff" size="32rpx" @click="navback" />
				</view>
			</u-navbar>
		</view>
		<scroll-view scroll-y class="f1">
			<view class="u-text-center" style="color: #fff">
				<view style="font-size: 50rpx;margin-top: 240rpx;;">海报</view>
				<view class="font-24 mt-15">{{info.list.length ? info.current+1 : 0}}/{{info.list.length}}</view>
				<view style="padding-left: 113rpx;height: 824rpx;margin-top: 82rpx;position: relative;">
					<view style="width: 20rpx;position: absolute;left: 50rpx;top: 40%;" class="flex flex-dir-c">
						<view v-for="(item,i) in info.list.length" :key='i' class="swiper-imgs"
							:class="[i == info.current ? 'swiper-dot' : 'swiper-active']"></view>
					</view>
					<swiper class="swiper" :current="info.current" next-margin="95rpx" @change="changeSwiper">
						<swiper-item class="swiper-item" v-for="(item,i) in info.list" :key="i">
							<image class="scroll" style="width: 524rpx;"
								:src="item.image"></image>
						</swiper-item>
					</swiper>

				</view>
				<view class="detail flex flex-jc-c flex-ai-c" @click.stop="detail">
					<view style="margin-right: 10rpx;font-weight: 400;" class="font-22">立即分享</view>
					<i-icon icon="icon-right" size="20rpx" color="#fff" />
				</view>
			</view>
		</scroll-view>
	</view>

	<adv class="adv" v-if="info.show" ref="advRef" :config="info.advConfig" @close="info.show = false" />

</template>

<script setup lang="ts">
	import {
		reactive,ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import adv from "@/components/poster.vue";
	import me from '../../api/me.js';
	import user from '../../api/user.js';
	let advRef = ref(null)
	let info = reactive({
		current: 0,
		list: [],
		page: 1,
		show: false,
		userinfo: uni.getStorageSync('userInfo'),
		advConfig: {},
		qrcode: ''
	})
	//海报
	const getPoster = async () => {
		const res = await me.getPoster()
		info.list = res.data.list
		info.qrcode = res.data.min_qrcode
	}
	// 活动图swiper
	const changeSwiper = (i : any) => {
		info.current = i.detail.current
	}
	const createAdv = (row) => {
		setTimeout(() => {
			if (advRef.value) advRef.value?.init(); //触发子组件，打开弹窗
		}, 500);
	}
	const detail = () => {
		if (!info.list.length) return uni.showToast({
			title: '暂无活动',
			icon: 'none'
		})
		let item = info.list[info.current]
		info.advConfig = {
			pic: item.image,
			headavatar: info.userinfo.headavatar,
			qrcode: info.qrcode
		}
		info.show = true
		createAdv(info.list[info.current])
		setTimeout(() => {
			if (advRef.value) advRef.value?.handleshareEvent();
		}, 500);
	}
	
	const navback = () => {
		uni.navigateBack()
	}
	const getMemberInfo = async (token ?: string) => {
		const res = await user.getMemberInfo()
		info.userinfo = res.data
	}

	onLoad(() => {
		getPoster()
		getMemberInfo()
	})
</script>
<style>
	page {
		height: 100%;
		width: 750rpx;
		background: linear-gradient(180deg, #949494 0%, #010101 100%);
	}
</style>
<style lang="scss" scoped>
	.modal {
		width: 100%;
		height: 600px;

	}

	:deep(.u-line) {
		display: none;
	}

	.swiper-imgs {
		width: 15rpx;
		height: 15rpx;
		margin-bottom: 23rpx;
		border-radius: 50%;
	}

	.swiper-active {
		border: 2rpx solid #9E9E9E !important;
		background: none !important;
	}

	.swiper-dot {
		background: #FFFFFF;

	}

	.detail {
		width: 264rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid #FFFFFF;
		line-height: 80rpx;
		margin: 76rpx auto 112rpx auto;
	}

	.slot-wrap {
		width: 60rpx;
		height: 60rpx;
		background: rgba(119, 119, 119, 0.6);
		border-radius: 50%;
		margin-left: 13rpx;
	}

	.swiper-item {
		color: #fff;
	}
</style>